<template>
  <div class="app-container">
    <el-row >
      <el-col :span="6" :xs="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{$t('enterprise.cardTitle')}}</span>
          </div>
          <div>
            <div class="text-center logo-bg">
                <el-image fit="contain" v-if="enterprise.logoUrl" :src="enterprise.logoUrl" class="ent-logo" alt=""></el-image>
                <div v-else class="ent-logo-default"></div>
            </div>
            <ul class="list-group list-group-striped">
              <li class="list-group-item">
                <svg-icon icon-class="number" class="mr5" />{{$t('enterprise.entNo')}}
                <div class="pull-right">{{ enterprise.tenantNo }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="user" class="mr5" />{{$t('enterprise.entName')}}
                <div class="pull-right">{{ enterprise.tenantName }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="phone" class="mr5" />{{$t('enterprise.entContact')}}
                <div class="pull-right">{{ enterprise.leader }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="email"  class="mr5"/>{{$t('enterprise.entTel')}}
                <div class="pull-right">{{ enterprise.phonenumber }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="tree" class="mr5" />{{$t('enterprise.entEmail')}}
                <div class="pull-right">{{ enterprise.email }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="peoples" class="mr5" />{{$t('enterprise.entAddress')}}
                <div class="pull-right">{{ enterprise.address }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="date" class="mr5" />{{$t('enterprise.entDesc')}}
                <div class="pull-right">{{ enterprise.remark }}</div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col style="padding-left:10px" :span="18" :xs="24">
        <el-card>
          <div slot="header" class="clearfix">
            <span>{{$t('enterprise.title')}}</span>
          </div>

          <enterpriseInfo :data="enterprise" @update="update" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import enterpriseInfo from "./enterpriseInfo";
import { getMyTenantProfile } from "@/api/system/enterprise";

export default {
  name: "Profile",
  components: { enterpriseInfo },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      enterprise: {
        logoUrl:'',
        tenantName:'' , //企业名称
        leader:'',  //企业联系人
        phonenumber:'', //企业电话
        email:'',  //企业邮箱
        address:'', //企业地址
        remark:''  //企业宣传
      },
    };
  },
  mounted() {
    this.getTenant();
  },
  methods: {
    getTenant() {
      getMyTenantProfile().then(response => {
        if(response.code == 200){
          this.enterprise = response.data
        }
      });
    },
    update(data){
      if(data){
        this.enterprise = data
      }

    }
  }
};
</script>

<style lang="scss" scoped>

.app-container {
 padding:0;
 height: 100%;
  ::v-deep  .el-form-item{
    margin-bottom: 15px;
  }
}
::v-deep .el-row,::v-deep .el-col,::v-deep .el-card,{
  height: 100%;
}
.list-group{
  color: #606266;
  .svg-icon{
    color: #a7a8b0;
    width:1em;
    height:1em;
    margin-right: 5px;
  }
}
::v-deep .el-card__header{
  padding: 7px 15px;
  font-size: 14px;
  line-height: 25px;
}
::v-deep  .el-form-item__label{
  color:#6C6E77;
  font-weight: normal;
}
.ent-logo-default{
  display: inline-block;
  width:120px;
  height:120px;
  background: #{'var(--current-color)'};
}
.ent-logo{
  height:120px;
  display: inline-block;
}
.logo-bg{
  width:190px;
  padding:10px;
  margin: 0 auto;
  background-color: #{'var(--current-head-theme)'};
}

</style>
